import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
// import { Page, UserLink, ProjectLink, DeviceLink } from 'components'
// import styles from './index.less'
import {
  PageHeader,
  // Select,
  // Typography,
} from 'antd'
import List from '../../components/List'
import { withI18n, Trans } from '@lingui/react'
import { stringify } from 'qs'
import { router } from 'utils'

// const { Paragraph, Title } = Typography
// const Option = Select.Option

@withI18n()
@connect(({ userSetAuth, app, loading }) => ({ userSetAuth, app, loading }))
class userSetAuth extends PureComponent {
  render() {
    const { userSetAuth, dispatch, app, loading, location } = this.props
    const { data, select, pathquery } = userSetAuth
    const { isMobile } = app
    // const { query } = location
    // console.log("select:" + select);
    // let authsitems = (data && select) ? data[select] : []
    // authsitems = authsitems ? authsitems : []
    // const queryitem = () => {
    //   dispatch({ type: 'userSetAuth/query', payload: { deviceid } })
    // }
    const listProps = {
      // pagination,
      dispatch,
      select,
      hadauths: data ? data['userauths'] : [],
      dataSource: data ? data['allauths'] : [],
      loading: loading.effects[`userSetAuth/query`],
      setloading: loading.effects[`userSetAuth/setuserauth`],
    }
    return (
      <div>
        <PageHeader
          onBack={() => {
            dispatch({
              type: 'userSetAuth/back',
            })
            router.push({
              pathname: `/auths/userauth`,
              search: stringify(pathquery, { arrayFormat: 'repeat' }),
            })
          }}
          title={<Trans>User Rights Operation</Trans>}
        >
          <List
            {...listProps}
            setauths={payload => {
              dispatch({
                type: 'userSetAuth/setuserauth',
                payload: {
                  ...payload,
                  userid: payload.rolename,
                },
              }).then(() => {
                dispatch({
                  type: 'userSetAuth/query',
                  payload: { userid: select },
                })
              })
            }}
          />
        </PageHeader>
      </div>
    )
  }
}

userSetAuth.propTypes = {
  userSetAuth: PropTypes.object,
}

export default userSetAuth
